<template>
  <div class="ek-editor">
      <Toolbar
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        mode="default"
      />
      <Editor
      border
        :style="{ height:'300px' }"
        class="ek-editor-content"
        v-model="value"
        :defaultConfig="editorConfig"
        mode="default"
        @onCreated="handleCreated"
        @onChange="change"
        @onFocus="focus"
        @onBlur="blur"
      />
  </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {
  defineProps,
  defineEmits,
  computed,
  shallowRef
} from "vue";

const props = defineProps({
  // 值
  modelValue:{
    type: [String, Number],
    default: "",
  },
  // 禁用
  disabled: {
    type: Boolean,
    default: false,
  },
  placeholder: {
    type: String,
    default: "请输入内容"
  }
});
const emit = defineEmits(['update:modelValue','blur','focus','change'])

const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    // 处理富文本默认有标签问题 
    if(editorRef.value.getText()){
      emit('update:modelValue', value)
    }else {
      emit('update:modelValue', '')
    }
  }
})
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const toolbarConfig = {
    toolbarKeys: [
        'headerSelect',
        'bold',
        'underline',
        'italic',
        'clearStyle',
        'color',
        'bgColor',
        'justifyLeft',
        'justifyCenter',
        'justifyRight',
        'bulletedList',
        'numberedList',
        '|',
        'fontSize',
        'fontFamily',
        'lineHeight',
        // 菜单组，包含多个菜单
        {
            key: 'group-image', // 必填，要以 group 开头
            title: '图片', // 必填
            iconSvg: '',
            menuKeys: ['uploadImage', 
                'insertImage', 
                'deleteImage', 
                'editImage', 
                'viewImageLink']
        },
        {
            key: 'group-video',
            title: '视频',
            iconSvg: '',
            menuKeys: ['insertVideo',
                'uploadVideo']
        },
        {
            key: 'group-link',
            title: '链接',
            menuKeys: ['insertLink', 'editLink', 'unLink', 'viewLink']
        },
        {
            key: 'group-table',
            title: '表格',
            menuKeys: ['insertTable',
                'deleteTable',
                'insertTableRow',
                'deleteTableRow',
                'insertTableCol',
                'deleteTableCol',
                'tableHeader',
                'tableFullWidth']
        },
        'divider',
        'emotion',
        'blockquote',
        'redo',
        'undo',
        'fullScreen'
    ]
}
const editorConfig = { 
  readOnly: props.disabled,
  autoFocus: false,
  placeholder: props.placeholder,
  MENU_CONF: {
    
    uploadImage:{
      server: '/admin/upload/richTextUploadImage',
      // form-data fieldName ，默认值 'wangeditor-uploaded-image'
      fieldName: 'file',

      // 单个文件的最大体积限制，默认为 2M
      maxFileSize: 1 * 1024 * 1024, // 1M

      // 最多可上传几个文件，默认为 100
      maxNumberOfFiles: 10,

      // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
      allowedFileTypes: ['image/*'],

      // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
      // meta: {
      //     token: 'xxx',
      //     otherKey: 'yyy'
      // },

      // 将 meta 拼接到 url 参数中，默认 false
      // metaWithUrl: false,

      // 自定义增加 http  header
      // headers: {
      //     Accept: 'text/x-json',
      //     otherKey: 'xxx'
      // },

      // 跨域是否传递 cookie ，默认为 false
      withCredentials: true,

      // 超时时间，默认为 10 秒
      timeout: 5 * 1000, // 5 秒

      // 上传之前触发
      onBeforeUpload(file) { 
        return file
        // 可以 return
        // 1. return file 或者 new 一个 file ，接下来将上传
        // 2. return false ，不上传这个 file
      },
      // 上传进度的回调函数
      onProgress(progress) { 
        // progress 是 0-100 的数字
        console.log('progress', progress)
      },

      // 单个文件上传成功之后
      onSuccess(file, res) {  
          console.log(`${file.name} 上传成功`, res)
      },
      // 单个文件上传失败
      onFailed(file, res) {  
        console.log(`${file.name} 上传失败`, res)
      },
      // 上传错误，或者触发 timeout 超时
      onError(file, err, res) { 
          console.log(`${file.name} 上传出错`, err, res)
      },
    }
  }
}

function handleCreated (editor)  {
    editorRef.value = editor // 记录 editor 实例，重要！
    if(props.disabled){
      editorRef.value.disable();
    }
}


// 失去焦点
function blur(event) {
  emit('blur', event)
};
// 聚焦
function focus(event) {
  emit('focus', event)
};
// 改变事件, focus时候就触发了change，是否为插件bug
function change(event) {
  if(editorRef.value.getText()) {
    emit('change', editorRef.value.getHtml())
  }else {
    emit('change','')
  }
};


</script>

<style scoped lang="scss">
.ek-editor {
   width: 100%;
   border: 1px solid #dcdfe6;
   border-radius: 4px;
   .ek-editor-content {
    text-align: left;
   }
}
::v-deep(.w-e-text-placeholder) {
    font-style: unset;
}
</style>
